<template>
  <div class="approval-group">
    <div class="approval-group-left">
      <ApprovalAnchor :list="list" />
    </div>
    <div class="list-wrap">
      <a-row class="list-row" :gutter="24">
        <template v-for="group in list" :key="group.id">
          <div class="group-title" :id="'anchor' + group.id"></div>
          <a-col
            v-for="item in group.processList"
            :key="item.id"
            class="list-col"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            @click="initate(item.id)"
          >
            <CardWrap :data="item"> </CardWrap>
          </a-col>
        </template>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import CardWrap from './CardWrap.vue';
import {
  getFlowGroupsAndProcessList,
  getSpecifiedGroupProcessList
} from '@/apis/flowGroup/index';
import {
  FlowGroup,
  FlowGroupAndProcessParams,
  FowSpecifiedGroupProcess
} from '@/apis/flowGroup/type';
import { useRouter, useRoute } from 'vue-router';
import ApprovalAnchor from './ApprovalAnchor.vue';

const router = useRouter();
const route = useRoute();
onMounted(() => {
  init();
  getFlowGroupNew();
});
const userId = ref(0);
const init = () => {
  groupParamsNew.userId = Number(localStorage.getItem('userId'));
  const appCode = route.query.appCode?.toString();
  if (!appCode) return;
  groupParams.appCode = appCode;
};
const list = ref<FlowGroup[]>([]);
const groupParams = reactive<FlowGroupAndProcessParams>({
  appCode: 'APP280373000'
});
const groupParamsNew = reactive<FowSpecifiedGroupProcess>({
  userId: 0,
  organizationIds: '1,2',
  positionIds: '1,2',
  roleIds: '1,2'
});
/**
 * 获取流程分组及其流程
 */
const getFlowGroup = async () => {
  // let res = await getFlowGroupsAndProcessList(groupParams);
  // list.value = res?.processGroupsDetail || [];
};
const getFlowGroupNew = async () => {
  let res = await getSpecifiedGroupProcessList(groupParamsNew);
  list.value = res?.processDetailList || [];
};

// 发起审批动作
const initate = async (processId: number) => {
  router.push({
    name: 'approvalInitiate',
    query: { userId: groupParamsNew.userId, processId }
  });
  //   const routeData = router.resolve({
  //     name: 'InitiateApproval',
  //     query: { userId: 2, processId }
  //   });
  //   window.open(routeData.href, '_blank');
};
</script>

<style scoped lang="less">
.approval-group {
  padding: 0 16px;
  display: flex;
  &-left {
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid var(--color-border);
    overflow: auto;
  }
  .list-wrap {
    flex: 1;

    .button-group {
      display: flex;
      justify-content: flex-end;
    }
    .block-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #eee;
      padding: 5px 10px;
    }
  }
}

.list-row {
  align-items: stretch;
}
.list-col {
  margin-bottom: 16px;
  // height: 100%;
}
.card-wrap {
  height: 100%;
  transition: all 0.3s;
  border: 1px solid var(--color-neutral-3);
  &:hover {
    transform: translateY(-4px);
  }
  :deep(.arco-card-meta-description) {
    color: rgb(var(--gray-6));
    .arco-descriptions-item-label-inline {
      font-weight: normal;
      font-size: 12px;
      color: rgb(var(--gray-6));
    }
    .arco-descriptions-item-value-inline {
      color: rgb(var(--gray-8));
    }
  }
}
.empty-wrap {
  //   height: 200px;
  border-radius: 4px;
  :deep(.arco-card) {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    .arco-result-title {
      color: rgb(var(--gray-6));
    }
  }
}
</style>
